import axios from 'axios';
import {useRequest} from 'ahooks';
import qs from 'qs';
import {useEffect, useState} from 'react';
import styled from 'styled-components';
import {Button, Select} from 'acud';
import {clonedeep} from '@/utils';
import {useDebounce} from '@/hook';
import SearchPanel from './SearchPanel';
import List from './TableList';
import KindModal from './KindModal';

const Option = Select.Option;

export const BaseUrl = 'http://localhost:3001';

const Wrapper = styled.div`
    display: flex;
    width: 600px;
    padding: 20px;
    border: 1px solid black;
    flex-direction: column;
    margin: 100px auto 0;
    box-sizing: border-box;
    main {
        display: flex;
        justify-content: center;
        height: 100%;
        padding: 20px 0;
        gap: 20px;
    }
    section {
        width: 100%;
    }

    .acud-btn {
        width: 72px;
    }
`;

export interface Parmas {
    name: string;
    id?: string;
    type?: string;
}

export interface RootObject {
    key?: number;
    name: string;
    organization: string;
    type: string;
    id: number;
}

const App = () => {
    const [params, setParam] = useState<Parmas>({
        name: '',
        id: '',
    });

    const [visible, setVisible] = useState(false);

    const [loading, setLoading] = useState(false);

    const [list, setList] = useState<RootObject[]>([]);

    const [kindList, setKindList] = useState<RootObject[]>([]);

    const handleChange = (value: any) => {
        setLoading(true);
        setParam({
            ...params,
            type: value,
        });
    };

    useEffect(
        () => {
            let Timer = setTimeout(() => setLoading(false), 1500);
            return () => {
                clearTimeout(Timer);
            };
        },
        [params.name]
    );

    const loadData = async () => {
        try {
            const list = await fetch(`${BaseUrl}/projects`).then((res) => res.json());
            setList(list);
            const kind = await fetch(`${BaseUrl}/kind`).then((res) => res.json());
            setKindList(kind);
        }
        catch (error) {}
    };

    useEffect(
        () => {
            loadData();
        },
        []
    );

    const debounceParam = useDebounce(params, 800);

   const {loading: listLoading} = useRequest(
        () => axios.get(`${BaseUrl}/projects?${qs.stringify(clonedeep(debounceParam))}`), 
        {
            refreshDeps: [debounceParam],
            onSuccess(res: any) {
                setList(res.data);
                setLoading(false);
            },
        },
    );

    return (
        <Wrapper>
            <Button type="primary" onClick={() => setVisible(true)}>
                添加
            </Button>
            <main>
                <SearchPanel params={params} setParam={setParam} />
                <Select
                    value={params.type}
                    onChange={handleChange}
                    style={{width: 300}}
                >
                    <Option value={''}>全部种类</Option>
                    {kindList?.map((item) => (
                        <Option value={item.type} key={item.id}>
                            {item.name}
                        </Option>
                    ))}
                </Select>
            </main>
            <section>
                <List loading={listLoading || loading} list={list}></List>
            </section>
            <KindModal
                visible={visible}
                options={kindList}
                setVisible={setVisible}
                onAfter={loadData}
            />
        </Wrapper>
    );
};

export default App;
